<template>
	<view class="page-container">
		<!-- 筛选区域 -->
		<view class="tech-card filter-section">
			<view class="card-title">
				<view class="title-icon">💰</view>
				<text>收益管理</text>
			</view>

			<view class="filter-content">
				<view class="filter-left">
					<view class="filter-item">
						<text class="filter-label">收益时间：</text>
						<el-date-picker
							v-model="params.time"
							type="month"
							placeholder="选择时间"
							size="small"
							@change="getDataList()"
							format="yyyy-MM"
							value-format="yyyy-MM"
							class="tech-date-picker" />
					</view>
				</view>

				<view class="filter-right">
					<view class="total-money-card">
						<text class="money-label">累计收益</text>
						<text class="money-value">¥ {{totalMoney}}</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 数据表格区域 -->
		<view class="tech-card table-section">
			<view class="card-title">
				<view class="title-icon">📊</view>
				<text>收益列表</text>
				<text class="file-count" v-if="dataList.length > 0">共 {{ maxCount }} 条记录</text>
			</view>

			<el-table :data="dataList" class="tech-table" size="small"
				:header-cell-style="{ background: '#1a1f3a', color: '#00f0ff', fontWeight: 'bold' }"
				height="calc(100vh - 340px)">
				<el-table-column type="index" label="#" width="60" align="center" />

				<el-table-column prop="out_trade_no" label="订单号" width="200" show-overflow-tooltip>
					<template slot-scope="scope">
						<view class="order-no">{{scope.row.out_trade_no}}</view>
					</template>
				</el-table-column>

				<el-table-column prop="pptTitle" label="课件名称" min-width="200" show-overflow-tooltip>
					<template slot-scope="scope">
						<view class="ppt-title">{{scope.row.pptTitle}}</view>
					</template>
				</el-table-column>

				<el-table-column prop="payMoney" label="收益金额" width="120" align="center">
					<template slot-scope="scope">
						<view class="money-tag">+¥ {{scope.row.payMoney}}</view>
					</template>
				</el-table-column>

				<el-table-column prop="createdAt" label="创建日期" width="180" align="center" />
			</el-table>

			<view class="pagination-wrapper">
				<el-pagination
					@current-change="handleCurrentChange"
					@size-change="handleSizeChange"
					:current-page="params.pageNum"
					:page-sizes="[20, 40, 60, 80, 100]"
					:page-size="params.pageSize"
					:total="maxCount"
					layout="total, sizes, prev, pager, next, jumper"
					background>
				</el-pagination>
			</view>
		</view>
	</view>
</template>

<script>
	let that
	export default {
		data() {
			return {
				dataList: [],
				maxPage: 1,
				maxCount: 1,
				totalMoney: 0,
				params: {
					pageSize: 20,
					pageNum: 1,
					time: ''
				}
			}
		},

		onLoad() {
			that = this
			that.getDataList()
		},

		methods: {
			handleCurrentChange(value) {
				that.params.pageNum = value
				that.getDataList()
			},

			handleSizeChange(value) {
				that.params.pageSize = value
				that.params.pageNum = 1
				that.getDataList()
			},

			getDataList() {
				that.common.rightApi("admin/order/adminMoneyList", that.params).then(res => {
					that.dataList = res.data
					that.maxCount = res.maxCount
					that.maxPage = res.maxPage
					that.totalMoney = res.totalMoney
				}, "加载中...")
			}
		},

	}
</script>

<style scoped>
/* ==================== 全局容器 ==================== */
.page-container {
	min-height: 100vh;
	padding: 16px;
	background: linear-gradient(135deg, #0a0e27 0%, #1a1f3a 50%, #0f1729 100%);
	font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ==================== 科技卡片 ==================== */
.tech-card {
	background: rgba(26, 31, 58, 0.6);
	backdrop-filter: blur(10px);
	border-radius: 12px;
	padding: 16px;
	margin-bottom: 16px;
	border: 1px solid rgba(0, 240, 255, 0.2);
	box-shadow:
		0 8px 32px rgba(0, 240, 255, 0.1),
		inset 0 1px 0 rgba(255, 255, 255, 0.1);
	transition: all 0.3s ease;
	position: relative;
	overflow: hidden;
}

.tech-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 2px;
	background: linear-gradient(90deg, transparent, #00f0ff, transparent);
	animation: scan 3s infinite;
}

@keyframes scan {
	0%, 100% {
		left: -100%;
	}
	50% {
		left: 100%;
	}
}

.tech-card:hover {
	border-color: rgba(0, 240, 255, 0.4);
}

/* ==================== 卡片标题 ==================== */
.card-title {
	display: flex;
	align-items: center;
	font-size: 16px;
	font-weight: 600;
	color: #00f0ff;
	margin-bottom: 12px;
	padding-bottom: 8px;
	border-bottom: 1px solid rgba(0, 240, 255, 0.2);
	text-shadow: 0 0 10px rgba(0, 240, 255, 0.5);
}

.title-icon {
	margin-right: 6px;
	font-size: 18px;
	filter: drop-shadow(0 0 8px rgba(0, 240, 255, 0.6));
}

.file-count {
	margin-left: auto;
	font-size: 12px;
	color: #7f8ea3;
	font-weight: normal;
	background: rgba(0, 240, 255, 0.1);
	padding: 2px 10px;
	border-radius: 10px;
	border: 1px solid rgba(0, 240, 255, 0.2);
}

/* ==================== 筛选区域 ==================== */
.filter-content {
	display: flex;
	gap: 16px;
	align-items: center;
	justify-content: space-between;
}

.filter-left {
	display: flex;
	gap: 16px;
	align-items: center;
	flex: 1;
}

.filter-right {
	display: flex;
	gap: 12px;
	align-items: center;
}

.filter-item {
	display: flex;
	align-items: center;
	gap: 12px;
}

.filter-label {
	color: #b8c5d6;
	font-size: 14px;
	font-weight: 500;
}

/* ==================== 日期选择器 ==================== */
.tech-date-picker {
	width: 200px;
}

.tech-date-picker >>> .el-input__inner {
	background: rgba(10, 14, 39, 0.6) !important;
	border: 1px solid rgba(0, 240, 255, 0.3) !important;
	color: #e0e6ed !important;
	border-radius: 6px;
	padding: 8px 12px;
	font-size: 13px;
	height: 36px;
	transition: all 0.3s ease;
}

.tech-date-picker >>> .el-input__inner:hover {
	border-color: rgba(0, 240, 255, 0.5) !important;
}

.tech-date-picker >>> .el-input__inner:focus {
	border-color: #00f0ff !important;
	box-shadow: 0 0 20px rgba(0, 240, 255, 0.4);
	background: rgba(10, 14, 39, 0.8) !important;
}

.tech-date-picker >>> .el-input__prefix {
	color: #00f0ff;
}

.tech-date-picker >>> .el-input__inner::placeholder {
	color: #4a5568;
}

/* ==================== 累计收益卡片 ==================== */
.total-money-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 12px 24px;
	background: linear-gradient(135deg, rgba(0, 255, 136, 0.15) 0%, rgba(0, 200, 108, 0.1) 100%);
	border: 1px solid rgba(0, 255, 136, 0.3);
	border-radius: 8px;
	box-shadow: 0 4px 20px rgba(0, 255, 136, 0.2);
	position: relative;
	overflow: hidden;
}

.total-money-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(0, 255, 136, 0.1), transparent);
	animation: shimmer 3s infinite;
}

@keyframes shimmer {
	0%, 100% {
		left: -100%;
	}
	50% {
		left: 100%;
	}
}

.money-label {
	font-size: 12px;
	color: #7f8ea3;
	margin-bottom: 4px;
	position: relative;
	z-index: 1;
}

.money-value {
	font-size: 24px;
	font-weight: 700;
	color: #00ff88;
	text-shadow: 0 0 15px rgba(0, 255, 136, 0.6);
	position: relative;
	z-index: 1;
}

/* ==================== 表格区域 ==================== */
.table-section {
	height: calc(100vh - 200px);
	display: flex;
	flex-direction: column;
}

/* ==================== 表格样式 ==================== */
.tech-table {
	width: 100%;
	flex: 1;
}

.tech-table >>> .el-table {
	background: transparent !important;
	color: #e0e6ed;
}

.tech-table >>> .el-table::before {
	background: transparent !important;
}

.tech-table >>> .el-table th,
.tech-table >>> .el-table tr {
	background: transparent !important;
}

.tech-table >>> .el-table td,
.tech-table >>> .el-table th.is-leaf {
	border-bottom: 1px solid rgba(0, 240, 255, 0.1) !important;
}

.tech-table >>> .el-table td {
	color: #b8c5d6 !important;
	transition: all 0.3s ease;
	position: relative;
	z-index: 1;
}

.tech-table >>> .el-table__body tr {
	background: rgba(10, 14, 39, 0.3) !important;
	transition: all 0.3s ease;
	border-left: 3px solid transparent;
}

.tech-table >>> .el-table__body tr:hover {
	background: linear-gradient(90deg,
		rgba(0, 240, 255, 0.2) 0%,
		rgba(0, 240, 255, 0.15) 50%,
		rgba(0, 240, 255, 0.05) 100%) !important;
	border-left-color: #00f0ff;
}

.tech-table >>> .el-table__body tr:hover td {
	color: #e0e6ed !important;
}

.tech-table >>> .el-table__body-wrapper {
	scrollbar-width: thin;
	scrollbar-color: rgba(0, 240, 255, 0.3) rgba(10, 14, 39, 0.5);
}

.tech-table >>> .el-table__body-wrapper::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}

.tech-table >>> .el-table__body-wrapper::-webkit-scrollbar-track {
	background: rgba(10, 14, 39, 0.5);
	border-radius: 4px;
}

.tech-table >>> .el-table__body-wrapper::-webkit-scrollbar-thumb {
	background: rgba(0, 240, 255, 0.3);
	border-radius: 4px;
	transition: background 0.3s;
}

.tech-table >>> .el-table__body-wrapper::-webkit-scrollbar-thumb:hover {
	background: rgba(0, 240, 255, 0.5);
}

/* ==================== 表格内容样式 ==================== */
.order-no {
	color: #b8c5d6;
	font-size: 13px;
	font-family: 'Monaco', 'Courier New', monospace;
}

.ppt-title {
	color: #00d4ff;
	font-weight: 500;
	font-size: 13px;
}

.money-tag {
	display: inline-block;
	padding: 4px 12px;
	background: linear-gradient(135deg, rgba(0, 255, 136, 0.2) 0%, rgba(0, 200, 108, 0.15) 100%);
	color: #00ff88;
	border: 1px solid rgba(0, 255, 136, 0.3);
	border-radius: 6px;
	font-weight: 600;
	font-size: 14px;
	text-shadow: 0 0 10px rgba(0, 255, 136, 0.5);
	box-shadow: 0 2px 8px rgba(0, 255, 136, 0.2);
}

/* ==================== 分页器 ==================== */
.pagination-wrapper {
	display: flex;
	justify-content: flex-end;
	padding: 16px 0 0 0;
	margin-top: 12px;
	border-top: 1px solid rgba(0, 240, 255, 0.1);
}

.pagination-wrapper >>> .el-pagination {
	display: flex;
	align-items: center;
	gap: 8px;
}

.pagination-wrapper >>> .el-pagination.is-background .btn-next,
.pagination-wrapper >>> .el-pagination.is-background .btn-prev,
.pagination-wrapper >>> .el-pagination.is-background .el-pager li {
	background: rgba(10, 14, 39, 0.6) !important;
	color: #b8c5d6 !important;
	border: 1px solid rgba(0, 240, 255, 0.3) !important;
	border-radius: 6px;
	margin: 0 2px;
	transition: all 0.3s ease;
}

.pagination-wrapper >>> .el-pagination.is-background .el-pager li:hover,
.pagination-wrapper >>> .el-pagination.is-background .btn-next:hover,
.pagination-wrapper >>> .el-pagination.is-background .btn-prev:hover {
	color: #00f0ff !important;
	border-color: rgba(0, 240, 255, 0.5) !important;
}

.pagination-wrapper >>> .el-pagination.is-background .el-pager li.active {
	background: linear-gradient(135deg, rgba(0, 240, 255, 0.3) 0%, rgba(0, 153, 204, 0.3) 100%) !important;
	color: #00f0ff !important;
	border-color: #00f0ff !important;
	box-shadow: 0 0 20px rgba(0, 240, 255, 0.4);
	font-weight: 600;
}

.pagination-wrapper >>> .el-pagination__total,
.pagination-wrapper >>> .el-pagination__jump {
	color: #b8c5d6 !important;
}

.pagination-wrapper >>> .el-pagination__sizes .el-input .el-input__inner {
	background: rgba(10, 14, 39, 0.6) !important;
	border: 1px solid rgba(0, 240, 255, 0.3) !important;
	color: #e0e6ed !important;
	border-radius: 6px;
}

.pagination-wrapper >>> .el-pagination__sizes .el-input .el-input__inner:hover {
	border-color: rgba(0, 240, 255, 0.5) !important;
}

.pagination-wrapper >>> .el-input__inner {
	background: rgba(10, 14, 39, 0.6) !important;
	border: 1px solid rgba(0, 240, 255, 0.3) !important;
	color: #e0e6ed !important;
	border-radius: 6px;
}

/* ==================== 日期选择器下拉面板 ==================== */
.el-picker-panel {
	background: rgba(26, 31, 58, 0.95) !important;
	border: 1px solid rgba(0, 240, 255, 0.3) !important;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5) !important;
}

.el-date-picker__header-label,
.el-month-table td .cell {
	color: #e0e6ed !important;
}

.el-month-table td.current:not(.disabled) .cell {
	color: #00f0ff !important;
	font-weight: 600;
}

.el-month-table td.today .cell {
	color: #00ff88 !important;
	font-weight: 600;
}

.el-month-table td .cell:hover {
	color: #00f0ff !important;
	background: rgba(0, 240, 255, 0.2) !important;
}

/* ==================== 下拉菜单深色样式 ==================== */
.el-select-dropdown {
	background: rgba(26, 31, 58, 0.95) !important;
	border: 1px solid rgba(0, 240, 255, 0.3) !important;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5) !important;
}

.el-select-dropdown__item {
	color: #e0e6ed !important;
	background: transparent !important;
}

.el-select-dropdown__item:hover {
	background: rgba(0, 240, 255, 0.2) !important;
}

.el-select-dropdown__item.selected {
	color: #00f0ff !important;
	font-weight: 600;
}

/* ==================== 响应式 ==================== */
@media (max-width: 1400px) {
	.filter-content {
		flex-wrap: wrap;
	}

	.filter-left,
	.filter-right {
		flex: 100%;
	}
}

@media (max-width: 768px) {
	.page-container {
		padding: 12px;
	}

	.tech-card {
		padding: 12px;
		margin-bottom: 12px;
	}

	.filter-content {
		flex-direction: column;
	}

	.tech-date-picker {
		width: 100%;
	}
}
</style>
